<template>
  <view class="content">
    <view class="avatorWrapper">
      <view class="avator">
        <image class="img" src="../../static/img/login.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="form">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item name="name">
          <input class="input" type="text" value="" v-model="formData.name" placeholder="请输入名字" />
        </uni-forms-item>
        <uni-forms-item name="email">
          <input class="input" type="text" value="" v-model="formData.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item name="mobilenumber">
          <input class="input" type="text" value="" v-model="formData.mobilenumber" placeholder="请输入电话号码" />
        </uni-forms-item>
        <uni-forms-item name="password">
          <input class="input" type="password" value="" v-model="formData.password" placeholder="请输入密码" />
        </uni-forms-item>
      </uni-forms>

      <view class="loginBtn" @click="submit">
        <text class="btnValue">注册</text>
      </view>
    </view>




  </view>
  </view>
</template>



<script>
  import {
    postSignUp
  } from "@/api/login.js";
  export default {
    data() {
      return {
        formData: {
          email: '',
          password: '',
          mobilenumber: '',
          name: "",
        },
        rules: {
          email: {
            rules: [{
              required: true,
              errorMessage: '请输入邮箱',

            }, ]
          }
        }
      }
    },
    onLoad() {

    },
    methods: {

      submit() {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', res);
          this.signUp(res)
        }).catch(err => {
          console.log('表单错误信息：', err);
        })
      },




      signUp(e) {
        postSignUp(this.formData).then(res => {
          if (res.data.status == 200) {
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }
        })

      },

    }
  }
</script>



<style>
  .content {
    width: 100vw;
    height: 100vh;
  }

  .avatorWrapper {
    height: 45vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .avator {
    width: 500upx;
    height: 500upx;
    overflow: hidden;
  }

  .avator .img {
    width: 100%
  }

  .form {
    padding: 0 100upx;
    margin-top: 10px;
  }

  .input {
    flex: 1;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    border-radius: 5px;
    padding: 10px;
  }

  .loginBtn {
    width: 100%;
    height: 80upx;
    background: #2979ff;
    border-radius: 50upx;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

  }



  .loginBtn .btnValue {
    color: white;
  }

  .forgotBtn {
    text-align: center;
    color: #8d8d8d;
    font-size: 15px;
    margin-top: 20px;
  }
</style>